<template>
	<view class="bottom-view">
		<view v-if="current.pronum > 0" class="cart" @click="$emit('cart')">
			<view class="cart-iconbox">
				<image src="/static/img/carticon.png" class="cart-icon" />
			</view>
			<text class="cart-txt">购物</text>
		</view>
		<view v-if="current.linkurl" style="align-items: flex-start;">
			<view class="linkurl" @tap="gotourl" :data-url="current.linkurl">
				<text class="linkurl-txt">{{current.linkname}}</text>
				<image src="/static/img/shortvideo_arrowright.png" class="linkurl-img" />
			</view>
		</view>
		<text class="title">{{ current.name }}</text>
		<text v-if="current.description" class="description">{{ current.description }}</text>
	</view>
</template>

<script>
	const app = getApp()
	
	export default {
		props: {
			current: Object
		},
		data() {
			return {
				preUrl: app.globalData.pre_url,
			}
		},
		methods: {
			gotourl(e) {
				getApp().goto(e.currentTarget.dataset.url, e.currentTarget.dataset.opentype)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-view {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 140rpx;
		padding-left: 30rpx;
		padding-bottom: 30rpx;
		overflow: hidden;
	}
	.title {
		margin-top: 16rpx;
		font-size: 36rpx;
		color: #fff;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.description {
		margin-top: 16rpx;
		font-size: 28rpx;
		height: 88rpx;
		line-height: 44rpx;
		color: #fff;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.linkurl {
		margin-top: 16rpx;
		margin-left: -30rpx;
		flex-direction: row;
		align-items: center;
		background: rgba(100, 100, 100, 0.5);
		padding: 10rpx 10rpx 10rpx 30rpx;
		border-radius: 0 30rpx 30rpx 0;
	}
	
	.linkurl-img {
		width: 36rpx;
		height: 36rpx
	}
	
	.linkurl-txt {
		font-size: 26rpx;
		color: #fff;
	}
	
	.cart {
		flex-direction: row;
		align-items: center;
	}
	
	.cart-iconbox {
		padding: 4rpx;
		align-items: center;
		border-radius: 4rpx;
		background-color: #EE5B4B;
	}
	
	.cart-icon {
		width: 32rpx;
		height: 32rpx;
	}
	
	.cart-txt {
		margin-left: 10rpx;
		font-size: 28rpx;
		color: #fff;
		font-weight: bold;
	}
</style>